import { Meta, Status, Props, Story } from '../../../../.storybook/components';
import * as Stories from './NotificationBanner.stories';

<Meta of={Stories} />

# NotificationBanner

<Status variant="stable" />

The notification banner component prominently communicates and promotes high-level, site-wide information to the user.

<Story of={Stories.Base} inline={false} />
<Props />

## When to use it

The notification banner should be used to display the global system messages or for promotions and recommendations.

## Usage guidelines

- **Do** Use the 'system' variant for the system notification use cases that are communicating topics on a global level.
- **Do** Use the 'promotional' variant for the promotional notification use cases.
- To communicate a message, use either a headline, a body copy, or both. If needed, an optional image or close icon can be included.
- The width of the image needs to be explicitly defined by the developer.
- **Do** Make sure the close icon has enough space and does not overlap the visible content of the image.
- **Do not** use "fullscreen" photography as an image.
- **Do** use the monochromatic outline illustration style for the system notification use cases.
- **Do** use the coloured illustration style for the promotional notification use cases.
- **Do** provide an action to allow users to directly follow up on the communicated content. Depending on the context action can be either tertirary, or a primary button.

<Story of={Stories.Dismissable} inline={false} />
